<!--
@description: 搜索框组件
@Author: lianys
@Date: 2021-04-05
-->
<template>
    <div class="search-box">
        <el-input 
            class="inline-input"
            v-model="keyword"
            placeholder="请输入你想搜索的内容"
            @focus="showDropdown = true"
            @blur="blur"
            @input="handleChange"
            @keyup.enter.native="handleSearch"
        >
            <template slot="append">
                <dg-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</dg-button>
            </template>
        </el-input>
        <div class="search-menu" :style="{height:height}" v-if="showDropdown && keyword == ''" @click.stop="showDropdown = true">
            <dg-scrollbar>
                <div v-for="(item, index) in menuData" :key="index">
                    <p class="search-menu__title"><i :class="item.icon"></i>{{item.label}}</p>
                    <div class="search-menu__padding" v-if="item.type == 'btn'">
                        <el-button
                            type="primary"
                            plain
                            class="search-menu__tag"
                            v-for="(menu, menuindex) in item.data"
                            :key="menuindex"
                            @click="handleSelect(menu)"
                        >
                            {{ menu.value }}
                        </el-button>
                    </div>
                    <template v-else>
                        <div
                            class="search-menu__item"
                            v-for="(menu, menuindex) in item.data"
                            :key="menuindex"
                            @click="handleSelect(menu)"
                        >
                            {{ menu.value }}
                        </div>
                    </template>
                    <el-divider v-if="index < menuData.length-1"></el-divider>
                </div>
            </dg-scrollbar>
        </div>
        <div class="search-menu" :style="{height:height}" v-if="showDropdown && keyword != '' && searchData.length > 0">
            <dg-scrollbar>
                <div
                    class="search-menu__item"
                    v-for="(item, index) in searchData"
                    :key="index"
                    @click="handleSelect(item)"
                >
                    {{ item.value }}
                </div>
            </dg-scrollbar>
        </div>
    </div>
</template>

<script>
export default {
    name: "search-box",
    components: {},
    // 接收父页面传过来的属性
    props: {
        // 关键词
        word: {
            type: String,
            default: ''
        },
        menuData: {
            type: Array,
            default: function () {
                return [
                    {
                        label:'最近搜索',
                        data:[]   
                    },
                    {
                        label:'热门搜索',
                        data:[]   
                    },
                    
                ];
            }
        },
        searchData: {
            type: Array,
            default: function () {
                return [];
            }
        },
        // 菜单高度
        height: {
            type: String,
            default: '19rem'
        },
    },
    // 页面数据绑定
    data() {
        return {
            keyword: "",
            restaurants: [],
            // 显示下拉菜单
            showDropdown: false,
            timeout: null,
        };
    },
    computed: {},
    methods: {
        /*
         * 输入框失焦
         */
        blur(){
            this.timeout = setTimeout(() => {
                this.showDropdown = false
            }, 200);
        },

        /*
         * 搜索
         */
        handleSearch() {
            if (this.keyword) this.$emit("search", this.keyword);
        },

        /*
         * 选中搜索栏
         */
        handleSelect(item) {
            this.keyword = item.value;
            this.$emit("select", item.value);
            this.showDropdown = false
        },

        /*
         * 选中下拉菜单
         */
        handleDropDown(item) {
            this.$emit("dropdown", item);
            this.showDropdown = false
        },

        /*
         * 输入框变化
         */
        handleChange(value){
            this.$emit("change", value);
            console.log(value)
        }
    },
    created() {
        this.keyword = this.word;
    },
    mounted() {
    },
};
</script>
<style scoped lang='scss'>
/deep/ .zindex--top {
    z-index: 10001 !important;
}
.search-box {
    position: relative;
    border: 5px solid #0f62ca;
    border-radius: 5px;
    &::before {
        content: "";
        background: url("@~/src/assets/images/serach-input-bg.png") no-repeat center;
        display: inline-block;
        height: 4.375rem;
        position: absolute;
        bottom: -5rem;
        left: 0;
        right: 0;
        background-size: cover;
    }
    /deep/ .el-input {
        width: 50rem;
    }
    /deep/ .el-input__inner {
        height: 3.75rem;
        line-height: 3.75rem;
        border: 0;
        border-radius: 4px 0 0 4px;
        border-right: 0;
        font-size: 1.125rem;
    }
    /deep/ .el-autocomplete {
        vertical-align: middle;
    }
    /deep/ .el-input-group__append {
        background: #4090ff;
        border: 5px solid #4090ff;
        button.el-button {
            height: 3.75rem;
            width: 10.1rem;
            font-size: 1.5rem;
            color: #ffffff;
            i {
                font-size: 1.5rem;
                margin-right: 0.5rem;
            }
        }
    }
}
.search-menu {
    background-color: #fff;
    width: 100%;
    position: absolute;
    left: 0;
    top: 4rem;
    z-index: 100;
    border-radius: 4px;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.85);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    padding: 1rem 0;
    &__title {
        padding: 0 3.5rem;
        font-size: 1.125rem;
        font-weight: 600;
        position: relative;
        [class^="el-icon-"] {
            position: absolute;
            left: 2rem;
            top: 0;
            font-size: 1rem;
            line-height: 2.025rem;
        }
    }
    &__padding {
        padding: 1rem 3.5rem;
        margin-left: -1rem;
    }
    &__item {
        width: 100%;
        padding: 0 3.5rem;
        box-sizing: border-box;
        line-height: 2.5rem;
        cursor: pointer;
        &:hover {
            background-color: #ebf5ff;
            color: #4090ff;
        }
    }
    /deep/ .el-divider--horizontal{
        margin: 1rem 0;
    }
    /deep/ .el-button--primary.is-plain {
        border-radius: 1rem;
        border: 0;
    }
    /deep/ .el-button{
        margin: 0 0 1rem 1rem;
    }
}
</style>
